import React, { Component, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Form, Input, Upload, Select, Button, message } from 'antd';
import { connect } from 'dva';
import styles from './BaseView.less';


const FormItem = Form.Item;
const { Option } = Select;


@connect(({ user }) => ({
  currentUser: user.currentUser,
}))
@Form.create()
class BindingView extends Component {
  constructor() {
    super();
    this.state = {
      phone: false
    };
  }

  componentDidMount() {
    const { dispatch, currentUser } = this.props;
    if (currentUser.phone === '') {
      this.setState(() => ({
        phone: true
      }))
    }
    console.log(currentUser)
  }

  getViewDom = ref => {
    this.view = ref;
  };

  saveMessage = () => {
    let userInfo = this.props.form.getFieldsValue();
    this.props.form.validateFields((err, values) => {
      console.log(err, values)
      console.log(userInfo)
      if (!err) {
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'geographic/fetcc',
            payload: { validationCodeId:this.state.validationCodeId,phone:userInfo.mobile,code:userInfo.code },
            callback: res => {
              console.log('用户名称', res);
              if (res.code === 0) {
                message.success(`${res.msg}`)
              }
            },
          });
        });
      }
    })
  }

  reset=()=>{
    this.props.form.setFields({ "code": "" })
    this.props.form.setFields({ "mobile": "" })
    this.props.form.resetFields();
   
  }

  veCode = () => {
    let userInfo = this.props.form.getFieldsValue();
    this.props.form.validateFields((err, values) => {
      console.log(userInfo)
      if (!(/^1[34578]\d{9}$/.test(userInfo.mobile))) {

      } else {
        console.log('22')
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'geographic/fetcb',
            payload: { phone: userInfo.mobile },
            callback: res => {
              this.setState(()=>({
                validationCodeId:res.validationCodeId
              }))
              console.log('用户名称', res);
              message.success(`短信已发送请及时查收`)
              if (res.code === 0) {
                // message.success(`${res.msg}`)
              }
            },
          });
        });
      }
    })
  }

  render() {
    const { currentUser } = this.props;
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <div className={styles.backgroundp}>
        {currentUser.phone ?<p>亲爱的用户，系统检测到您已经绑定手机，为了您的账号安全，建议不要随意改变绑定手机号码</p>: <p>亲爱的用户，系统检测到您还没有绑定手机，为了您的账号安全，建议绑定手机</p>}
        {/* <p>亲爱的用户，系统检测到您还没有绑定手机，为了您的账号安全，建议绑定手机</p>
        <p>亲爱的用户，系统检测到您已经绑定手机，为了您的账号安全，建议不要随意改变绑定手机号码</p> */}
        <div className={styles.baseView} ref={this.getViewDom}>
          <div className={styles.left}>
            <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
              <FormItem label='手机'>
                {getFieldDecorator('mobile', {
                  rules: [
                    {
                      required: true,
                      message: '请输入手机号码'
                    },
                    {
                      pattern: new RegExp('^[1][3,4,5,7,8][0-9]{9}$', 'g'),
                      message: '请输入正确的手机号码'
                    }
                  ],
                })(<Input allowClear />)}
              </FormItem>
              <FormItem label='验证码'>
                {getFieldDecorator('code', {
                  rules: [
                    {
                      required: true,
                      message: '请输入验证码'
                    },
                  ],
                })(
                  <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
                    <Input allowClear style={{ minWidth: 120, marginRight: 10 }} /><Button type="primary" onClick={this.veCode}>发送验证码</Button>
                  </div>

                )}
              </FormItem>
              {
                this.state.phone ? null : <FormItem label='手机号码'>
                  {getFieldDecorator('phone', {
                    initialValue: currentUser.phone
                  })(<Input disabled={true} />)}
                </FormItem>
              }
              <Button type="primary" onClick={this.saveMessage}>保存</Button>
              {/* <Button style={{ marginLeft: 10 }} onClick={this.reset}>重置</Button> */}
            </Form>
          </div>
        </div>
      </div>
    );
  }
}

export default BindingView;
